feat: add OG image for compare pages by Adebesin-Cell · Pull Request #2277 · npmx-dev/npmx.dev

Adebesin-Cell · 2026-03-25T20:09:14Z

Better social preview for compare pages.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

vercel · 2026-03-25T20:09:20Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 6, 2026 7:59pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 6, 2026 7:59pm
npmx-lunaria	Ignored		Apr 6, 2026 7:59pm

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

coderabbitai · 2026-03-25T20:11:11Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds a server-rendered OG-image Vue SFC at app/components/OgImage/Compare.vue with props packages, emptyDescription and primaryColor. It normalises packages into up to four trimmed entries, concurrently fetches each package’s last-week downloads and registry dist-tags.latest version with a 2.5s timeout and per-request fallbacks to { downloads: 0, version: '' }, derives maxDownloads, formats download text and bar widths, and renders either an empty-state message or rows with name, downloads, optional version pill and a gradient bar with decorative background. The page registers the component via defineOgImageComponent('Compare', ...) and the test adds it to SKIPPED_COMPONENTS.

Suggested labels

front

Suggested reviewers

alexdln
serhalp
graphieros

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description directly relates to the changeset by describing a new social preview feature for compare pages with visual examples.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-03-25T20:14:25Z

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/compare.vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai

Actionable comments posted: 1

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8bf4f3f9-b99e-4b4a-82b3-eb8cf42d26e8

📥 Commits

Reviewing files that changed from the base of the PR and between 5aff68f and fdd8983.

📒 Files selected for processing (2)

app/components/OgImage/Compare.vue
app/pages/compare.vue

app/components/OgImage/Compare.vue

Fetches real weekly downloads and latest version for each package, renders a horizontal bar chart with gradient bars sized relative to the highest-downloaded package. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Show descriptive text when no packages are selected, matching the Default template's badge style. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Pass i18n-translated empty description from the page as a prop since OG image components don't have access to $t. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

coderabbitai

🧹 Nitpick comments (2)

app/components/OgImage/Compare.vue (2)
41-69: Top-level await reads computed value during setup.

The code accesses displayPackages.value at the top level of <script setup>, which evaluates during component setup. While this works in Nuxt OG image server-rendering contexts where props are available immediately, this pattern can be fragile if the component is ever used in a different context.

Consider using onMounted or Nuxt's data-fetching composables if issues arise, but for a server-only OG image component, the current approach should work correctly.

138-138: Consider potential duplicate key collision.

Using :key="pkg.name" assumes package names are unique. If the same package name appears multiple times in the input (e.g., ?packages=react,react), this would cause a key collision warning and potentially incorrect rendering.

For an OG image component, this edge case is unlikely to matter, but you could use the index as a fallback:
💡 Optional fix
-        <div v-for="pkg in stats" :key="pkg.name" class="flex flex-col gap-1">
+        <div v-for="(pkg, index) in stats" :key="`${pkg.name}-${index}`" class="flex flex-col gap-1">

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 89a5a390-89bf-49d9-b45a-2cf8521a47c3

📥 Commits

Reviewing files that changed from the base of the PR and between fdd8983 and 8dad8ae.

📒 Files selected for processing (3)

app/components/OgImage/Compare.vue
app/pages/compare.vue
test/unit/a11y-component-coverage.spec.ts

🚧 Files skipped from review as they are similar to previous changes (1)

app/pages/compare.vue

graphieros

Looks good to me 🌿

RYGRIT · 2026-03-26T00:04:33Z

Great work on the new compare OG image!

Perhaps we could give the metrics (weekly downloads) a bit more visual prominence? I personally think the download numbers are the most important info here — the progress bars already do a great job showing the relative scale, but the absolute numbers are what people scan for first.

… image Bump download metrics from text-xl/gray to text-2xl/font-medium/lighter color so absolute numbers are easier to scan at a glance.

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/components/OgImage/Compare.vue (1)
22-29: Normalise string[] input the same as comma-separated input.

Line 28 passes array input through as-is, so whitespace-only or empty entries can leak into fetch calls. Normalising both paths keeps behaviour consistent.
♻️ Suggested refactor
 const displayPackages = computed(() => {
   const raw = props.packages
-  const list =
-    typeof raw === 'string'
-      ? raw
-          .split(',')
-          .map(p => p.trim())
-          .filter(Boolean)
-      : raw
+  const list = (typeof raw === 'string' ? raw.split(',') : raw)
+    .map(p => p.trim())
+    .filter(Boolean)
   return list.slice(0, 4)
 })

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f198a43d-d3b0-4229-9a86-9da70bcb40d8

📥 Commits

Reviewing files that changed from the base of the PR and between 8dad8ae and 9fcab62.

📒 Files selected for processing (1)

app/components/OgImage/Compare.vue

app/components/OgImage/Compare.vue

trueberryless · 2026-03-26T16:08:28Z

Amazing 🤩

Is there a limit for how many packages can be compared at once or could this be abused to generate OG images that overflow the image dimensions?

graphieros · 2026-03-26T16:14:32Z

Amazing 🤩

Is there a limit for how many packages can be compared at once or could this be abused to generate OG images that overflow the image dimensions?

There is currently a limit of 4 on the compare page, but we'd like to either increase the limit or remove it entirely eventually. We discussed about this on discord, and @Adebesin-Cell has a plan for various scenarios to avoid overflows with different presentations (to be implemented when it becomes necessary).

trueberryless · 2026-03-26T16:25:46Z

There is currently a limit of 4 on the compare page, but we'd like to either increase the limit or remove it entirely eventually. We discussed about this on discord, and @Adebesin-Cell has a plan for various scenarios to avoid overflows with different presentations (to be implemented when it becomes necessary).

Thanks for the quick answer and ping. This looks perfect to me then 👍

- Add 2.5s timeout to npm API requests to prevent OG image render stalls - Increase download numbers to text-3xl font-bold white for better visual prominence on the compare OG card Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Adebesin-Cell · 2026-03-26T16:55:56Z

Great work on the new compare OG image!

Perhaps we could give the metrics (weekly downloads) a bit more visual prominence? I personally think the download numbers are the most important info here — the progress bars already do a great job showing the relative scale, but the absolute numbers are what people scan for first.

Howdy?

- Full tier (1-4): name + downloads + version badge + bar - Compact tier (5-6): name + downloads + thinner bar, no version - Grid tier (7-12): side-by-side grid layout (4×2 or 5×2) - Summary tier (13+): top 3 names + "+N more" fallback - Extended accent colors to 12 for larger comparisons - Skip version fetch for non-full tiers (faster rendering) - Extract magic numbers into named constants Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

graphieros · 2026-04-01T09:14:16Z

app/components/OgImage/Compare.vue

+    )
+    stats.value = results
+  } catch {
+    stats.value = displayPackages.value.map((name, index) => ({


I recommend you sort the stats by downloads, to show bars and lists from highest to smallest

- Sort packages by downloads descending for readability - Use consistent package box icon matching Package/Default OG images - Match icon size (w-16 h-16 p-3.5) to other OG components Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

- Show version badges on full/compact tiers (after package name) - Show inline version text on grid tier - Fetch versions for all tiers (not just full) - Sort packages by downloads descending for readability - Add ./npmx branding in bottom-right corner - Fix icon outline by using explicit linear-gradient Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

graphieros

@Adebesin-Cell

I fixed the confllct on the compare page.
Can you please fix the failing test in FacetSelector.spec.ts ? You just need to move the function out of scope as per the error message.
There is also a minor css class thing to fix as well.
Thank you:)

- Lighten version and /wk text in grid layout (#525252/#737373 → #a3a3a3) - Move findCategoryActionButton out of describe block (consistent-function-scoping) - Fix formatting in Compare.vue and compare.vue Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Adebesin-Cell · 2026-04-06T16:20:51Z

@Adebesin-Cell

I fixed the confllct on the compare page. Can you please fix the failing test in FacetSelector.spec.ts ? You just need to move the function out of scope as per the error message. There is also a minor css class thing to fix as well. Thank you:)

Hey!

Thanks for fixing the conflicts. I totally forgot I had this PR open. I fixed the tests now + made the texts more visible

graphieros · 2026-04-06T16:23:00Z

@Adebesin-Cell
Just this one css thing is pointed out by autofix code:

❌ [RTL] /home/runner/work/npmx.dev/npmx.dev/app/components/OgImage/Compare.vue:337:32 - avoid using 'right-20', use 'inset-ie-20' instead, or 'force-right-20' to keep physical direction.

After this, it will be LGTM
Perhaps you could ask a final validation from Alex too :)

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Adebesin-Cell · 2026-04-06T16:30:38Z

@Adebesin-Cell Just this one css thing is pointed out by autofix code:

❌ [RTL] /home/runner/work/npmx.dev/npmx.dev/app/components/OgImage/Compare.vue:337:32 - avoid using 'right-20', use 'inset-ie-20' instead, or 'force-right-20' to keep physical direction.

After this, it will be LGTM Perhaps you could ask a final validation from Alex too :)

Ha, thanks!

graphieros

LGTM 🌿

alexdln

Code lgtm, thanks 🤍

Can't check sth like https://npmx-fww36c0b2-npmx.vercel.app/compare?packages=zowe-revolutionizes-mainframe-devops-with-seamless-integration-streamlining-workflows-enabling-collaboration-automating-processes-enhancing-efficiency-and-accelerating-software-delivery-for-enhanced-business-value,sdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff but not related to changes

Names over 40 chars are truncated with ellipsis to prevent layout overflow with extremely long package names in all layout tiers. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

- Use numeric gap values (Satori-compatible) instead of CSS string gaps - Use flex-wrap with 220px items for grid layout (4 columns) - Add maxWidth on name spans for reliable text truncation - Remove version from grid tier to prevent layout misalignment - Redesign summary tier: smaller "13 packages" text to not compete with title - Improve /wk text visibility (#d4d4d4) Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

feat: add OG image for compare pages

806e120

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Adebesin-Cell and others added 2 commits March 25, 2026 21:09

chore: remove screenshot assets from repo

663f2d4

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

[autofix.ci] apply automated fixes

fdd8983

vercel bot deployed to Preview – npmx.dev March 25, 2026 20:13 View deployment

coderabbitai bot reviewed Mar 25, 2026

View reviewed changes

app/components/OgImage/Compare.vue Show resolved Hide resolved

Adebesin-Cell and others added 5 commits March 25, 2026 21:18

[autofix.ci] apply automated fixes

9adfedc

fix: mark packages prop as optional

75f2bf5

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

fix: handle empty state in compare OG image

e3bdf73

Show descriptive text when no packages are selected, matching the Default template's badge style. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

fix: use translated description for empty compare OG image

ddbeefa

Pass i18n-translated empty description from the page as a prop since OG image components don't have access to $t. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

vercel bot deployed to Preview – npmx.dev March 25, 2026 20:25 View deployment

fix: skip a11y test for OgImage/Compare (server-rendered image)

8dad8ae

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

vercel bot deployed to Preview – npmx.dev March 25, 2026 20:28 View deployment

coderabbitai bot reviewed Mar 25, 2026

View reviewed changes

graphieros approved these changes Mar 25, 2026

View reviewed changes

graphieros requested a review from alexdln March 25, 2026 21:05

fix(ui): increase visual prominence of download numbers in compare OG…

9fcab62

… image Bump download metrics from text-xl/gray to text-2xl/font-medium/lighter color so absolute numbers are easier to scan at a glance.

vercel bot deployed to Preview – npmx.dev March 26, 2026 11:42 View deployment

coderabbitai bot reviewed Mar 26, 2026

View reviewed changes

app/components/OgImage/Compare.vue Outdated Show resolved Hide resolved

Adebesin-Cell and others added 2 commits March 26, 2026 17:51

[autofix.ci] apply automated fixes

28ca4d3

vercel bot deployed to Preview – npmx.dev March 26, 2026 16:55 View deployment

Adebesin-Cell and others added 2 commits April 1, 2026 09:36

[autofix.ci] apply automated fixes

793f1b4

vercel bot deployed to Preview – npmx.dev April 1, 2026 08:40 View deployment

graphieros reviewed Apr 1, 2026

View reviewed changes

vercel bot deployed to Preview – npmx.dev April 1, 2026 12:48 View deployment

vercel bot deployed to Preview – npmx.dev April 1, 2026 13:34 View deployment

serhalp assigned graphieros Apr 6, 2026

Merge branch 'main' into feat/compare-og-image

6019761

vercel bot deployed to Preview – docs.npmx.dev April 6, 2026 14:36 View deployment

vercel bot deployed to Preview – npmx.dev April 6, 2026 14:37 View deployment

graphieros requested changes Apr 6, 2026

View reviewed changes

vercel bot deployed to Preview – npmx.dev April 6, 2026 16:21 View deployment

fix: use RTL-safe inset-ie-20 instead of right-20 in OG image

8e0d98e

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

vercel bot deployed to Preview – npmx.dev April 6, 2026 16:32 View deployment

graphieros approved these changes Apr 6, 2026

View reviewed changes

graphieros removed their assignment Apr 6, 2026

alexdln approved these changes Apr 6, 2026

View reviewed changes

fix: truncate long package names in compare OG image

935c48b

Names over 40 chars are truncated with ellipsis to prevent layout overflow with extremely long package names in all layout tiers. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

vercel bot deployed to Preview – npmx.dev April 6, 2026 17:15 View deployment

vercel bot deployed to Preview – npmx.dev April 6, 2026 19:36 View deployment

Adebesin-Cell and others added 2 commits April 6, 2026 20:55

fix: remove unused CONTENT_WIDTH and OG_PADDING_X constants

4e18cb6

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

[autofix.ci] apply automated fixes

310692a

vercel bot deployed to Preview – npmx.dev April 6, 2026 19:59 View deployment

Uh oh!

Conversation

Adebesin-Cell commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Suggested labels

Suggested reviewers

Uh oh!

codecov bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

graphieros left a comment

Choose a reason for hiding this comment

Uh oh!

RYGRIT commented Mar 26, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

trueberryless commented Mar 26, 2026

Uh oh!

graphieros commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

trueberryless commented Mar 26, 2026

Uh oh!

Adebesin-Cell commented Mar 26, 2026

Uh oh!

graphieros Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

graphieros left a comment

Choose a reason for hiding this comment

Uh oh!

Adebesin-Cell commented Apr 6, 2026

Uh oh!

graphieros commented Apr 6, 2026

Uh oh!

Adebesin-Cell commented Apr 6, 2026

Uh oh!

graphieros left a comment

Choose a reason for hiding this comment

Uh oh!

alexdln left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Adebesin-Cell commented Mar 25, 2026 •

edited

Loading

vercel bot commented Mar 25, 2026 •

edited

Loading

coderabbitai bot commented Mar 25, 2026 •

edited

Loading

codecov bot commented Mar 25, 2026 •

edited

Loading

graphieros commented Mar 26, 2026 •

edited

Loading

graphieros Apr 1, 2026 •

edited

Loading

alexdln left a comment •

edited

Loading